<template>
  <!-- 收入统计 => 公司 -->
  <div class="pages financialFlow">
    <div class="pageLevel">
      <!-- 头部 -->
      <!-- 搜索框 -->
      <div class="total-income">
        <div class="all-income">
          <span v-if="isShop!='0'"> 门店：{{store.shopName}}</span>
          <span style="margin-left:80px">账期：{{store.startTime}}——{{store.endTime}}</span>
          <span style="margin-left:80px">未出账金额：{{store.price}}元</span>
        </div>
      </div>
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm" size="small">
          <el-form-item label="交易类型:" style="margin-left:10px">
            <el-select v-model="selectdata.type" placeholder="请选择财务类型">
              <el-option label="全部" value=""></el-option>
              <el-option label="售卖" value="1"></el-option>
              <el-option label="退货退款" value="2"></el-option>
              <el-option label="上个账期未结" value="3" v-if="activeName!='0'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型:" style="margin-left:10px">
            <el-select v-model="selectdata.tradeType" placeholder="请选择交易类型">
              <el-option label="全部" value=""></el-option>
              <el-option label="商品售卖" value="1"></el-option>
              <el-option label="服务售卖" value="2"></el-option>
              <el-option label="计次卡" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交易时间:" style="margin-left:10px">
            <el-date-picker :picker-options="pickerBeginDateBefore" :clearable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="会员手机号：" label-width="100px" style="margin-left:10px">
            <el-input clearable v-model="selectdata.keyword" placeholder="请输入会员手机号"></el-input>
          </el-form-item>
          <el-form-item label="" prop="wxser" class="wxelForm" label-width="55px">
            <el-button type="primary" @click="toPage" size="mini">搜索</el-button>
          </el-form-item>
          <el-form-item label="" label-width="35px">
            <el-button type="primary" v-if="setRole('未出账单明细导出')&&activeName=='0'" icon="el-icon-download" size="mini" @click="download" class="Button">导出</el-button>
            <el-button type="primary" v-if="setRole('已出未结账单明细导出')&&activeName=='1'" icon="el-icon-download" size="mini" @click="download" class="Button">导出</el-button>
            <el-button type="primary" v-if="setRole('历史账单明细导出')&&activeName=='2'" icon="el-icon-download" size="mini" @click="download" class="Button">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="payOrderNo" label="订单号" align="center">
          </el-table-column>
          <el-table-column prop="tradeTime" label="交易时间" align="center" :formatter="formatTimes">
            <!-- :formatter="formatTimes" -->
          </el-table-column>
          <el-table-column prop="typeName" label="交易类型" align="center">
          </el-table-column>
          <el-table-column prop="chlidTypeName" label="类型" align="center">
          </el-table-column>
          <el-table-column prop="iphone" label="会员手机" align="center">
          </el-table-column>
          <el-table-column prop="price" label="储值支付金额" align="center">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.type==2">-</span>
                <span v-if="scope.row.type==1">+</span>
                <span>{{scope.row.price}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="accountPrice" label="账户余额" align="center">
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button size="small" @click="detailed('/financial-center/storedValue-finance/finance-account/details-see',scope.row.detailOrderNo,scope.row.chlidType,scope.row.type,scope.row.payOrderNo)" type="text" class="addDetail" v-if="setRole('未出账单明细查看')&&activeName=='0'&&scope.row.chlidType!='3'&&scope.row.type!='3'">查看</el-button>
              <el-button size="small" @click="detailed('/financial-center/storedValue-finance/finance-account/details-see',scope.row.detailOrderNo,scope.row.chlidType,scope.row.type,scope.row.payOrderNo)" type="text" class="addDetail" v-if="setRole('已出未结账单明细查看')&&activeName=='1'&&scope.row.chlidType!='3'&&scope.row.type!='3'">查看</el-button>
              <el-button size="small" @click="detailed('/financial-center/storedValue-finance/finance-account/details-see',scope.row.detailOrderNo,scope.row.chlidType,scope.row.type,scope.row.payOrderNo)" type="text" class="addDetail" v-if="setRole('历史账单明细查看')&&activeName=='2'&&scope.row.chlidType!='3'&&scope.row.type!='3'">查看</el-button>

            </template>
          </el-table-column>
        </el-table>
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { listTradeDetails, listTradeDetailsExport, getShopCheck } from "@/api";
import util from "@/util";
import u from "@/util/state";
import { mapState } from "vuex";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId", "power", "isShop"]),
  data() {
    return {
      startTime: "",
      endTime: "",
      // pickerOptions0: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
      //   }
      // },
      pickerBeginDateBefore: {
        disabledDate: time => {
          // console.log(this.startTime);
          // console.log(this.endTime);
          return (
            new Date(this.endTime).getTime() < time.getTime() ||
            time.getTime() < new Date(this.startTime).getTime() - 8.64e7
          );
        }
      },
      value2: "",
      value1: "",
      store: {},
      activeName: "",
      tradeType: u.tradeType,
      prepayments: "",
      prepaidFee: "",
      value: [],
      status: "",
      name: "",
      pageSize: 10,
      total: 0,
      currentPage: 1,
      selectdata: {
        tradeType: "",
        type: ""
      },
      tableData: [],
      options: [],
      sum: ""
    };
  },
  created() {
    this.getShopCheck();
  },
  mounted() {
    this.activeName = util.getQuery("activeName");
  },
  methods: {
    detailed(name, id, orderType, type, payOrderNo) {
      util.routerTo(name, {
        id: id,
        type: type,
        orderType: orderType,
        payOrderNo: payOrderNo
      });
    },
    formatTimes: function(row) {
      return util.foryear(row.tradeTime) + " " + util.fortime(row.tradeTime);
    },
    getShopCheck() {
      let postdata = {
        id: util.getQuery("id")
      };
      getShopCheck(postdata).then(res => {
        this.store = res.data;
        this.startTime = util.foryear(parseInt(res.data.startTime));
        this.endTime = util.foryear(parseInt(res.data.endTime));
        this.$set(this.value, 0, util.foryear(parseInt(res.data.startTime)));
        this.$set(this.value, 1, util.foryear(parseInt(res.data.endTime)));
        this.store.startTime = this.getdatetime(this.store.startTime);
        this.store.endTime = this.getdatetime(this.store.endTime);
        console.log(this.value[0]);

        this.getdata(10, 1);
      });
    },
    //配置权限
    setRole(key) {
      //console.log(this.power);
      return util.selectTitle(this.power, key);
    },
    //跳页
    toPage() {
      this.getdata(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getdata(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(this.pageSize, val);
    },
    getdatetime(now) {
      now = parseInt(now);
      now = new Date(now);
      let year = now.getFullYear();
      let month = now.getMonth() + 1;
      let date = now.getDate();
      let hour = now.getHours();
      let minute = now.getMinutes();
      // let seconds = now.getSeconds()
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hour < 10) {
        hour = "0" + hour;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      return month + "月" + date + "日";
    },
    getdata(pageSize, pageNum) {
      if (!this.value) {
        console.log(this.value);
        this.value = ["", ""];
      }
      let postdata = {
        // companyId: 40,
        // shopId: 45,
        iphone: this.selectdata.keyword,
        type: this.selectdata.type,
        chlidType: this.selectdata.tradeType,
        pageNum: pageNum,
        pageSize: pageSize,
        startTime: this.value[0] + " 00:00:00",
        endTime: this.value[1] + " 23:59:59",
        isCheck: "1",
        status: this.activeName
      };
      if (this.isShop == "0") {
        this.$set(postdata, "companyId", "");
        this.$set(postdata, "shopId", this.merchantId);
      } else {
        this.$set(postdata, "companyId", this.merchantId);
        this.$set(postdata, "shopId", util.getQuery("shopId"));
      }
      listTradeDetails(postdata).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.pageTotal;
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].price = this.tableData[i].price.toFixed(2);
          this.tableData[i].accountPrice = this.tableData[
            i
          ].accountPrice.toFixed(2);
        }
      });
    },
    //12.11新增导出功能
    download() {
      let datas = {
        status: this.activeName,
        type: this.selectdata.type,
        chlidType: this.selectdata.tradeType,
        iphone: this.selectdata.keyword,
        startTime: this.value[0] + " 00:00:00",
        endTime: this.value[1] + " 23:59:59"
      };
      if (this.isShop == "0") {
        this.$set(datas, "companyId", "");
        this.$set(datas, "shopId", this.merchantId);
      } else {
        this.$set(datas, "companyId", this.merchantId);
        this.$set(datas, "shopId", util.getQuery("shopId"));
      }
      if (
        datas.endTime == "" ||
        datas.endTime == null ||
        datas.startTime == "" ||
        datas.startTime == null
      ) {
        this.$message({
          type: "error",
          message: "请检查导出条件是否完整"
        });
      }
      //console.log(this.tableData.length);
      if (this.tableData.length == 0) {
        this.$message({
          type: "error",
          message: "数据为空不能导出"
        });
      } else {
        listTradeDetailsExport(datas)
          .then(res => {
            if (res.data == undefined) {
              let fileName = "账务流水.xlsx";
              fileDownload(res, fileName);
            } else {
              this.$message(res.data.msg);
            }
          })
          .catch(e => {});
      }
    }
  }
};
</script>
<style>
.financialFlow .el-input__inner {
  height: 32px;
  line-height: 32px;
}
#app {
  text-align: inherit;
}
.financialFlow .total-income {
  color: #606266;
  width: 100%;
  line-height: 55px;
  margin: 20px 0px 10px 0px;
  border-bottom: 1px solid #eee;
}
.financialFlow .total-income .all-income {
  margin-left: 30px;
}
.financialFlow .total-income .all-income span {
  margin-left: 10px;
}
.financialFlow .tableSearch .el-select {
  width: 140px;
}
.financialFlow .span1 {
  color: red;
  margin-left: 100px;
  font-size: 14px;
  font-weight: bold;
}
</style>
